<template>
	<view>
		<header-top :messageInfo="{typeFlag:true,message:'客户注册'}"></header-top>
		<view class="mainpadding">
			<view class="mainpadding">
				<view class="strongtext">姓名</view>
				<view class="flexleft iteminput">
					<input type="text" placeholder="请输入姓名" v-model="name">
				</view>
				<view class="strongtext margin_top">公司名称</view>
				<view class="flexleft iteminput">
					<input type="text" placeholder="请输入公司名称" v-model="gongsi">
				</view>
				<view class="strongtext margin_top">手机号</view>
				<view class="flexleft iteminput">
					<input type="text" placeholder="请输入手机号" v-model="mobile">
				</view>
				<view class="strongtext margin_top">上传身份证</view>
				<view class="bigbox" v-show="uploadimage1">
					<image style="width: 100%; height: 100%;border-radius: 10rpx;" :src="uploadimage1" mode=""></image>
					<view class="deleteIMg" @click="uploadimage1=''"></view>
				</view>
				<view class="flexcolumn bigbox bigboxborder" v-show="!uploadimage1" @click="sfzz">
					<view class="sfsfm"></view>
					<view>点击上传</view>
				</view>
				<view class="bigbox margin_top" v-show="uploadimage2">
					<image style="width: 100%; height: 100%;border-radius: 10rpx;" :src="uploadimage2" mode=""></image>
					<view class="deleteIMg" @click="uploadimage2=''"></view>
				</view>
				<view class="flexcolumn bigbox margin_top bigboxborder" v-show="!uploadimage2" @click="sfzf">
					<view class="sfszm"></view>
					<view>点击上传</view>
				</view>
				<view class="strongtext margin_top">上传营业执照</view>
				<view class="bigbox" v-show="uploadimage3">
					<image style="width: 100%; height: 100%;border-radius: 10rpx;" :src="uploadimage3" mode=""></image>
					<view class="deleteIMg" @click="uploadimage3=''"></view>
				</view>
				<view class="flexcolumn bigbox bigboxborder" v-show="!uploadimage3" @click="yyzz">
					<view class="yyzz"></view>
					<view>点击上传</view>
				</view>
				<view class="strongtext margin_top">客户类型</view>
				<view class="flexleft">
					<view class="flexleft iteminput" @click="khlxshow=true">
						<view v-show="khlx==''" class="selecttext" style="color: #999;">请选择客户类型</view>
						<view v-show="khlx!=''" class="">{{khlx}}</view>
						<view class="selecticon"></view>
					</view>
					<!-- 客户类型 -->
					<u-picker :show="khlxshow" keyName="name" :columns="khlxcolumns" title="选择客户类型"
						@confirm="khlxconfirm" @cancel="khlxshow=false"></u-picker>
				</view>
				<view class="strongtext margin_top">店铺地址</view>
				<view class="flexbetween iteminput">
					<uni-data-picker :localdata="items" placeholder="请选择所在的省市区、乡镇" popup-title="请选择地区" v-model="area"
						@change="bindPickerChange">
						<text class="word12" v-if="!area.length">请选择所在的省市区、乡镇</text>
						<text class="word13" v-else>{{ area[0] }}/{{ area[1] }}/{{ area[2] }}</text>
					</uni-data-picker>
					<view class="address"></view>
				</view>
				<view class="strongtext margin_top">详细地址</view>
				<view class="flexbetween iteminput">
					<input type="text" placeholder="请输入详细地址" v-model="xxaddress">
					<view class="address"></view>
				</view>
				<view class="strongtext margin_top">选择行业</view>
				<view class="flexleft">
					<view class="flexleft iteminput" @click="hyshow=true">
						<view v-show="hy==''" class="selecttext" style="color: #999;">请选择行业</view>
						<view v-show="hy!=''" class="">{{hy}}</view>
						<view class="selecticon"></view>
					</view>
					<!-- 行业 -->
					<u-picker :show="hyshow" keyName="name" :columns="hycolumns" title="选择行业" @confirm="hyconfirm"
						@cancel="hyshow=false"></u-picker>
				</view>
				<view class="strongtext margin_top">经营范围</view>
				<view class="flexbetween iteminput" @click="jyclick">
					<input type="text" placeholder="请选择经营范围" disabled="true" v-model="jyvalue">
				</view>
				<!-- 经营范围 -->
				<u-picker :show="jyshow" keyName="name" :columns="jycolumns" title="选择经营范围" @confirm="jyconfirm"
					@cancel="jyshow=false"></u-picker>
				<view class="btn margin_top flexcenter" @click="nextclick">下一步</view>
				<!-- 端口套餐 -->
				<u-picker :show="dkshow" keyName="content" :columns="dkcolumns" title="选择端口" confirmText="去支付"
					@confirm="dkconfirm" @cancel="dkshow=false"></u-picker>
			</view>
		</view>
	</view>
</template>
<script>
	const httpRequest = require("@/common/httpRequest.js")
	import uniDataPicker from '@/uni_modules/uni-data-picker/components/uni-data-picker/keypress.js';
	import citys from "@/static/city/city.js"
	export default {
		data() {
			return {
				// 上传图片
				uploadimage1: "",
				uploadimage2: "",
				uploadimage3: "",
				area: [], // 选择地区内容
				address: {
					province: "",
					city: "",
					county: ""
				},
				items: citys.data, // 选择地区内容
				// 客户类型
				khlx: "", //客户类型
				khlxshow: false,
				khlxcolumns: [],
				khlxid: "",
				// 行业
				hy: "",
				hyshow: false,
				hycolumns: [
					[{
						id: 1,
						name: ""
					}]
				],
				hyid: "",
				//经营范围
				jyvalue: "",
				jyshow: false,
				jycolumns: [],
				jyid: "", //经营范围id
				// 端口
				dkshow: false,
				dkcolumns: [
					[{
						id: "",
						duankou: "",
						money: ""
					}]
				],
				dkid: "", //端口id
				name: "", //姓名
				gongsi: "", //公司
				mobile: "", //电话
				xxaddress: "", //详细地址
			}
		},
		onLoad() {
			this.getscreen()
		},
		methods: {
			nextclick() {
				if (this.name == "") {
					httpRequest.toast("请填写名称")
					return false
				}
				if (this.gongsi == "") {
					httpRequest.toast("请填写公司名称")
					return false
				}

				if (this.mobile == "") {
					httpRequest.toast("请填写手机号")
					return false
				}
				if (!this.mobile.match(/^1\d{10}$/)) {
					httpRequest.toast("请输入有效的手机号码");
					return false;
				}
				// if (this.uploadimage1 == "") {
				// 	httpRequest.toast("请上传身份证正面照片")
				// 	return false
				// }
				// if (this.uploadimage2 == "") {
				// 	httpRequest.toast("请上传身份证反面照片")
				// 	return false
				// }
				// if (this.uploadimage3 == "") {
				// 	httpRequest.toast("请上传营业执照")
				// 	return false
				// }
				if (this.khlx == "") {
					httpRequest.toast("请选择客户类型")
					return false
				}
				if (this.area.length == 0) {
					httpRequest.toast("请选择店铺地址")
					return false
				}
				if (this.xxaddress == "") {
					httpRequest.toast("请填写详细地址")
					return false
				}
				if (this.hy == "") {
					httpRequest.toast("请选择行业")
					return false
				}
				if (this.jyvalue == "") {
					httpRequest.toast("请选择经营范围")
					return false
				}
				this.dkshow = true
			},
			// 上传身份证正面
			sfzz() {
				let _this = this;
				uni.showActionSheet({
					itemList: ['相机', '相册'],
					success: function(res) {
						console.log(res)
						// 选择相机走0
						if (res.tapIndex == 0) {
							httpRequest.chooseImage(1, ['camera']).then(res => {
								for (var i = 0; i < res.length; i++) {
									_this.uploadImageService(res[i], 1)
								}
							}).catch(err => {});
						}
						// 选择相册走1
						if (res.tapIndex == 1) {
							httpRequest.chooseImage(1, ['album']).then(res => {
								for (var i = 0; i < res.length; i++) {
									// console.log(res[i])
									_this.uploadImageService(res[i], 1)
								}
							}).catch(err => {});
						}
					},
					fail: function(res) {
						console.log(res)
					}
				});
			},
			// 上传身份证反面
			sfzf() {
				let _this = this;
				uni.showActionSheet({
					itemList: ['相机', '相册'],
					success: function(res) {
						console.log(res)
						// 选择相机走0
						if (res.tapIndex == 0) {
							httpRequest.chooseImage(1, ['camera']).then(res => {
								for (var i = 0; i < res.length; i++) {
									_this.uploadImageService(res[i], 2)
								}
							}).catch(err => {});
						}
						// 选择相册走1
						if (res.tapIndex == 1) {
							httpRequest.chooseImage(1, ['album']).then(res => {
								for (var i = 0; i < res.length; i++) {
									// console.log(res[i])
									_this.uploadImageService(res[i], 2)
								}
							}).catch(err => {});
						}
					},
					fail: function(res) {
						console.log(res)
					}
				});
			},
			// 上传营业执照
			yyzz() {
				let _this = this;
				uni.showActionSheet({
					itemList: ['相机', '相册'],
					success: function(res) {
						console.log(res)
						// 选择相机走0
						if (res.tapIndex == 0) {
							httpRequest.chooseImage(1, ['camera']).then(res => {
								for (var i = 0; i < res.length; i++) {
									_this.uploadImageService(res[i], 3)
								}
							}).catch(err => {});
						}
						// 选择相册走1
						if (res.tapIndex == 1) {
							httpRequest.chooseImage(1, ['album']).then(res => {
								for (var i = 0; i < res.length; i++) {
									// console.log(res[i])
									_this.uploadImageService(res[i], 3)
								}
							}).catch(err => {});
						}
					},
					fail: function(res) {
						console.log(res)
					}
				});
			},
			uploadImageService(url, upImg) {
				let _this = this;
				httpRequest.uploadFile('/api/common/upload', url).then(res => {
					let image_item = res.fullurl;
					if (upImg == 1) {
						_this.uploadimage1 = image_item;
					} else if (upImg == 2) {
						_this.uploadimage2 = image_item;
					} else {
						_this.uploadimage3 = image_item;
					}
				}).catch(err => {});
			},
			getscreen() {
				this.getdk()
				this.gethy()
			},
			// 获取端口
			getdk() {
				httpRequest.request('appapi/staff/index/taocan', 'POST', {}).then(res => {
					let aa = []
					aa.push(res.data)
					this.dkcolumns = aa
				})
			},
			// 获取行业
			gethy() {
				httpRequest.request('appapi/staff/customers/category', 'POST', {
					id: 0
				}).then(res => {
					this.khlxcolumns.push(res.data.kehufenlei)
					let aa = []
					aa.push(res.data.hangye)
					this.hycolumns = aa
					this.jycolumns.push(res.data.fanwei)
				})
			},
			// 判断是否选择行业
			jyclick() {
				if (this.hyid == "") {
					httpRequest.toast("请先选择行业")
					return false
				}
				this.jyshow = true
			},

			// 客户类型
			khlxconfirm(e) {
				this.khlxshow = false
				this.khlxid = e.value[0].id
				this.khlx = e.value[0].name
			},
			// 行业确认
			hyconfirm(e) {
				this.hyshow = false
				this.hyid = e.value[0].id
				this.hy = e.value[0].name
			},
			// 经验范围确认
			jyconfirm(e) {
				this.jyshow = false
				this.jyid = e.value[0].id
				this.jyvalue = e.value[0].name
				console.log(e)
			},

			// 端口确认
			dkconfirm(e) {
				this.dkshow = false
				this.dkid = e.value[0].id
				httpRequest.request('appapi/staff/customers/shenqing', 'POST', {
					mobile: this.mobile,
					name: this.name,
					gongsi: this.gongsi,
					idcard_z: this.uploadimage1,
					idcard_f: this.uploadimage2,
					yingye: this.uploadimage3,
					type: this.khlx,
					dianpu: this.area[0] +"/"+ this.area[1] +"/"+ this.area[2],
					address: this.xxaddress,
					hangye: this.hyid,
					jingying: this.jyid,
					taocan: this.dkid,
				}).then(res => {
					httpRequest.toast(res.msg)
					if(res.code==1){
						setTimeout(()=>{
							uni.navigateBack(1)
						},500)
					}
				})
				console.log(e)
			},
			bindPickerChange(val) { // 选择地区内容
				let area = val.detail.value
				this.area = [area[0].text, area[1].text, area[2].text];
				this.address.province = area[0].value;
				this.address.city = area[1].value;
				this.address.county = area[2].value;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.strongtext {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #333333;
	}

	.margin_top {
		margin-top: 20rpx;
	}

	.iteminput {
		padding: 20rpx 30rpx;
		border: 1rpx solid #999999;
		border-radius: 10rpx;
	}

	.iteminput {
		input {
			width: 100%;
		}
	}

	// 上传图片
	.bigbox {
		height: 325rpx;
		width: 100%;
		border-radius: 10rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #999999;
		position: relative;
	}

	.bigboxborder {
		border: 1rpx solid #999999;
	}

	.selecticon {
		margin-left: 10rpx;
		background-image: url('@/static/imags/upload/select.png');
		background-size: 100% 100%;
	}

	.selecttext {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #999999;
	}

	.address {
		width: 50rpx;
		height: 47rpx;
		background-image: url("@/static/imags/upload/address.png");
		background-size: 100% 100%;
	}
</style>
